<template>
  <div class="theme" @touchmove.prevent>
	<div class="theme-cloud">
		<van-image width="70%" class="theme-cloud-left-top" :src="cloud_left_top" fit="scale-down"></van-image>
		<van-image width="70%" class="theme-cloud-right-top" :src="cloud_right_top" fit="scale-down"></van-image>
		<van-image width="100%" class="theme-cloud-left-down" :src="cloud_left_down" fit="scale-down"></van-image>
		<van-image width="70%" class="theme-cloud-right-down" :src="cloud_right_down" fit="scale-down"></van-image>
	</div>
   <div class="theme-picture">
	   <van-image 
		   width="100%" 
		   height="100%" 
		   :src="picture_scroll" 
		   fit="scale-down">
	   </van-image>
	</div>
	<div class="theme-door-god">
		<van-image
		   class="theme-door-god-left"
		   :src="door_god_left" 
		   fit="scale-down">
		</van-image>
		<van-image
		   class="theme-door-god-right"
		   :src="door_god_right" 
		   fit="scale-down">
		</van-image>
	</div>
	<div class="theme-button" @click="pageTo('/choice')">
		<van-image
		   :src="button_img" 
		   fit="scale-down">
		</van-image>
	</div>
  </div>
</template>
<script>
import { Image } from "vant";
export default {
    name: "theme",
	components: {
		[Image.name]: Image
	},
    data() {
      return {
        cloud_left_top: 'http://h5static.weiyoho.com/assets/theme/cloud-left-top.png',
		cloud_right_top: 'http://h5static.weiyoho.com/assets/theme/cloud-right-top.png',
		cloud_left_down: 'http://h5static.weiyoho.com/assets/theme/cloud-left-down.png',
		cloud_right_down: 'http://h5static.weiyoho.com/assets/theme/cloud-right-down.png',
		door_god_right: 'http://h5static.weiyoho.com/assets/theme/right-door-god.png',
		door_god_left: 'http://h5static.weiyoho.com/assets/theme/left-door-god.png',
		// door_god_left: 'http://h5static.weiyoho.com/assets/theme/left-door.png',
      	// door_god_right: 'http://h5static.weiyoho.com/assets/theme/right-door.png',
		picture_scroll: 'http://h5static.weiyoho.com/assets/theme/picture-scroll.png',
		button_img: 'http://h5static.weiyoho.com/assets/theme/button.png'
      };
    },
    methods: {
		/**
		 * @desc 跳转页面
		 */
		pageTo(url){
			this.$router.replace(url)
		}
	}
}
</script>
<style lang="less">
.theme {
    width: 100vw;
    height: 100vh;
    background: url(../assets/bg-red.png) no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	&-cloud{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		&-left-top{
			position: absolute;
			left: 0;
			top: 55px;
            transform: translateX(-55px);
            -webkit-animation: cloud-left-top-ani 15s ease-in-out infinite;
		}
		&-left-down{
			position: absolute;
			left: 0;
			bottom: -75px;
            transform: translateX(-80px);
            -webkit-animation: cloud-left-down-ani 20s ease-in-out infinite;
		}
		&-right-top{
			position: absolute;
			top: 120px;
			right: 0;
            transform: translateX(65px);
            -webkit-animation: cloud-right-top-ani 15s ease-in-out infinite;
		}
		&-right-down{
			position: absolute;
			right: 0;
			bottom: 20px;
            transform: translateX(85px);
            -webkit-animation: cloud-right-down-ani 20s ease-in-out infinite;
		}
	}
	&-picture{
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		opacity: 0;
		-webkit-animation: picture-ani ease-in-out 1 5s;
		animation-fill-mode: forwards;
	}
	&-door-god{
		position: relative;
		top: 0;
		z-index: 9;
		-webkit-animation: door-god-ani 8s ease-in-out infinite;
		&-left{
			position: absolute;
			left: 0;
			top: 25vh;
			transform: translateX(-150px);
		}
		&-right{
			position: absolute;
			right: 0;
			top: 25vh;
			transform: translateX(150px);
		}
	}
	&-button{
		position: absolute;
		bottom: 0px;
		width: 100vw;
		height: 145px;
		overflow: hidden;
		z-index: 99;
		-webkit-animation: button-ani 3s ease-in-out infinite;
	}
}
@keyframes door-god-ani{
	0%,50%{
		 transform: scale(1);  /*开始为原始大小*/
	}
	25%,75%{
		transform: scale(1.01); /*放大1.1倍*/
	}
}
@keyframes button-ani{
	0%,50%{
		 transform: scale(1);  /*开始为原始大小*/
	}
	25%,75%{
		transform: scale(1.08); /*放大1.1倍*/
	}
}
@keyframes picture-ani{
	from{
		 opacity: 0;
	}
	to{
		opacity: 1;
	}
}
@keyframes cloud-left-top-ani{
    0%{
         transform: translateX(-45px);
         opacity: 0;
    }
    15%{
        opacity: 1;
    }
	100%{
		transform: translateX(-195px);
	}
}
@keyframes cloud-left-down-ani{
	0%{
         transform: translateX(-55px);
         opacity: 0;
    }
    15%{
        opacity: 1;
    }
	100%{
		transform: translateX(-180px);
	}
}
@keyframes cloud-right-top-ani{
	0%{
         transform: translateX(45px);
         opacity: 0;
    }
    15%{
        opacity: 1;
    }
	100%{
		transform: translateX(105px);
	}
}
@keyframes cloud-right-down-ani{
	0%{
         transform: translateX(45px);
         opacity: 0;
    }
    15%{
        opacity: 1;
    }
	100%{
		transform: translateX(125px);
	}
}
</style>
